<template>
    <div class="drawing-container">
        <!-- 绘图组件容器DOM -->
        <div id="tui-image-editor"></div>
        <!-- <PictureEdit> -->
            <a-button class="save" size="small" type="primary">保存</a-button>
        <!-- </PictureEdit> -->
    </div>
</template>
<script>
import 'tui-image-editor/dist/tui-image-editor.css'
import 'tui-color-picker/dist/tui-color-picker.css'
import ImageEditor from 'tui-image-editor'
import PictureEdit from '@/components/PictureEdit/index';
import { customTheme, locale_zh } from '@/components/PictureEdit/js/js'
export default {
    name: 'ImgTui',
    components: {
        PictureEdit
    },
    data() {
        return {
            instance: null, // 创建的画布对象
            editImg: false,
            blobs: '',
        }
    },
    mounted() {
        // 页面创建完成后调用
        this.openPage('https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c1d7a1feb60346449c1a64893888989a~tplv-k3u1fbpfcp-watermark.image');
    },
    methods: {
        openPage(url) {
            this.editImg = true
            this.$nextTick(() => {
                this.init(url)
            })
        },
        init(url) {
            this.instance = new ImageEditor(document.querySelector('#tui-image-editor'), {
                includeUI: {
                    loadImage: {
                        path: url,
                        // path: this.$imgUrl + url,//当前为服务器地址
                        name: 'image',
                    },
                    // menu: ['resize', 'crop', 'rotate', 'draw', 'shape', 'icon', 'text', 'filter'], // 底部菜单按钮列表 隐藏镜像flip和遮罩mask
                    menu: ['crop', 'draw', 'shape', 'icon', 'text'], // 底部菜单按钮列表 隐藏镜像flip和遮罩mask
                    initMenu: 'text', // 默认打开的菜单项
                    menuBarPosition: 'top', // 菜单所在的位置
                    locale: locale_zh, // 本地化语言为中文
                    theme: customTheme, // 自定义样式
                },
                cssMaxWidth: 1000, // canvas 最大宽度
                cssMaxHeight: 600, // canvas 最大高度
            })
            document.getElementsByClassName('tui-image-editor-main')[0].style.top = '45px' // 调整图片显示位置
            document.getElementsByClassName('tie-btn-reset tui-image-editor-item help')[0].style.display = 'none' // 隐藏顶部重置按钮
            document.getElementsByClassName('tie-text-align-button')[0].style.display = 'none' // 隐藏文字对齐选项
        },
        // 保存图片，并上传
        save() {
            const base64String = this.instance.toDataURL() // base64 文件
            const data = window.atob(base64String.split(',')[1])
            const ia = new Uint8Array(data.length)
            for (let i = 0; i < data.length; i++) {
                ia[i] = data.charCodeAt(i)
            }
            const blob = new Blob([ia], { type: 'image/png' }) // blob 文件
            const form = new FormData()
            form.append('image', blob)
            // upload file
        },
    },
}
</script>

<style lang="less">
.el-dialog.editImg {
    margin-top: 10vh !important;
}

.drawing-container {
    height: 70vh;
    max-width: 90%;
    position: relative;

    .save {
        position: absolute;
        right: 50px;
        top: 15px;
    }
}
</style>